<template>
  <div
    class="context-menu"
    :style="{ display: show ? 'block' : 'none', top: `${y}px`, left: `${x}px` }"
  >
    <el-button icon="el-icon-lock" type="plain" @click="onMenuItemClick('lock')"
      >锁定组件</el-button
    >
    <el-button
      icon="el-icon-unlock"
      type="plain"
      @click="onMenuItemClick('unlock')"
      >解除锁定</el-button
    >
    <el-button
      icon="el-icon-arrow-up"
      type="plain"
      @click="onMenuItemClick('moveUp')"
      >上移一层</el-button
    >
    <el-button
      icon="el-icon-arrow-down"
      type="plain"
      @click="onMenuItemClick('moveDown')"
      >下移一层</el-button
    >
    <el-button
      icon="el-icon-caret-top"
      type="plain"
      @click="onMenuItemClick('moveTop')"
      >置于顶层</el-button
    >
    <el-button
      icon="el-icon-caret-bottom"
      type="plain"
      @click="onMenuItemClick('moveBottom')"
      >置于底层</el-button
    >

    <!-- 
    <button>左对齐</button>
    <button>右对齐</button>
    <button>上对齐</button>
    <button>下对齐</button>
    <button>水平剧中</button>
    <button>垂直剧中</button> 
    -->

    <el-button
      icon="el-icon-copy-document"
      type="plain"
      @click="onMenuItemClick('cloneComponent')"
      >复制组件</el-button
    >

    <el-button
      icon="el-icon-delete"
      type="plain"
      @click="onMenuItemClick('removeComponent')"
      >删除组件</el-button
    >

    <el-button
      icon="el-icon-delete-solid"
      type="plain"
      @click="onMenuItemClick('removeAnchor')"
      >删除锚点</el-button
    >

    <!-- 
    <button>删除锚点</button> 
    -->
  </div>
</template>
<script>


export default {
  name: 'ContextMenu',
  props: {
    show: {
      type: Boolean
    },
    y: {
      type: Number
    },
    x: {
      type: Number
    },
  },
  mounted () {
    //将本组件挂载到body节点处
    //document.body.appendChild(this.$el);
  },
  methods: {
    onMenuItemClick (action) {
      this.$emit('menuitemclick', action)
    }
  },
  destroyed () {
    //销毁
    //this.$el.parentNode.removeChild(this.$el);
  }
}
</script>
<style lang="scss" scoped>
.context-menu {
  position: absolute;
  width: 100px;
  background-color: white;
  box-shadow: 0 0 5px grey;
  border-radius: 3px;
  z-index: 20000;
}

.context-menu button {
  width: 100%;
  background-color: white;
  border: none;
  margin: 0;
  padding: 10px;
}

.context-menu button:hover {
  background-color: lightgray;
}
</style>